<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useFeedbackController } from '@/utils/feedback-util'
import {
  doQueryOperatorListGroupByPackage,
  OperatorItem,
  OperatorItemGroupByPackage
} from '@/api/operator-api'
import { Backpack } from '@icon-park/vue-next'
import { FPInputDescription } from '@/components/function-parameter/fp-input/index'
import { FPSelectDescription } from '@/components/function-parameter/fp-select/index'
import FPSelect from '@/components/function-parameter/fp-select/Index.vue'
import FPInput from '@/components/function-parameter/fp-input/Index.vue'
import { useDataFlowState } from '@/model/data-flow/data-flow-state'

const props = defineProps(['modelValue', 'id'])
const emits = defineEmits(['update:modelValue'])

//<--抽屉打开关闭控制
const { isShow, close } = useFeedbackController(props, emits)
//抽屉打开关闭控制-->


const show = ref(false)

onMounted(() => {
  isShow.value = true
})
//
const nodeConfig = ref<{
  id: string
  functionId: string
  name: string
  config: any
}>({
  id: props.id,
  functionId: '',
  name: '',
  config: {}
})

const options = ref<Array<OperatorItemGroupByPackage>>([])
const currentFunction = ref<OperatorItem>()

function queryFunctionListGroupByPackage(keyword?: string) {
  doQueryOperatorListGroupByPackage('source', keyword).then((res) => {
    options.value = res.data
  })
}

onMounted(() => {
  queryFunctionListGroupByPackage()
})

function selectFunction(id: string) {
  for (let e of options.value) {
    const find = e.functions.find((f) => f.id === id)
    if (find) {
      currentFunction.value = find
    }
  }
}

const { dataFlowState } = useDataFlowState()

function saveConfig() {
  const dataFlowNode = dataFlowState.nodes.get(props.id)
  dataFlowNode.name = nodeConfig.value.name
  dataFlowNode.info = {
    functionId: nodeConfig.value.functionId,
    config: nodeConfig.value.config
  }
  close()
}

//用于控制页面显示的变量
const activeNames = ref(['1', '2'])
const loading = ref(false)
const name = ref()
</script>

<template>
  <el-input v-model="name" />
  <el-button @click="show = true">显示</el-button>
  <el-drawer
    v-model="show"
    direction="rtl"
    :close-on-click-modal="false"
    :show-close="false"
    :size="550"
    class="node-configuration"
  >
    <!--    <template #header> 算子参数配置</template>-->
    <el-collapse v-model="activeNames">
      <el-collapse-item title="基础信息" name="1">
        <el-form
          size="small"
          label-position="right"
          style="width: 100%; padding-top: 10px"
          label-width="auto"
        >
          <el-form-item label="ID">
            <span style="color: var(--el-text-color-regular)">
              {{ id }}
            </span>
          </el-form-item>
          <el-form-item label="算子">
            <el-select
              class="function-type-select"
              v-model="nodeConfig.functionId"
              filterable
              :remote="true"
              :remote-method="queryFunctionListGroupByPackage"
              :loading="loading"
              @change="selectFunction"
              placeholder="请选择算子"
            >
              <div
                v-for="group in options"
                :key="group.name"
                class="function-type-select-group el-select-group__wrap"
              >
                <div class="group-title">
                  <el-icon class="icon">
                    <backpack />
                  </el-icon>
                  <span class="name">{{ group.name }}</span>
                  <span class="tag">&nbsp;-&nbsp;{{ group.tag }}</span>
                </div>
                <el-option
                  v-for="item in group.functions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                  <div class="option-item">
                    <div class="name">{{ item.name }}</div>
                    <div class="class-name">{{ item.className }}</div>
                  </div>
                </el-option>
              </div>
            </el-select>
          </el-form-item>
          <el-form-item label="名称">
            <el-input v-model="name" placeholder="请输入节点名称" />
          </el-form-item>
        </el-form>
      </el-collapse-item>
      <el-collapse-item title="算子参数" name="2">
        <el-empty description="未选择算子" v-if="!currentFunction" />
        <el-form
          v-else
          size="small"
          label-position="right"
          style="width: 100%; padding-top: 10px"
          label-width="auto"
        >
          <div
            v-for="(item, index) in currentFunction?.parameters"
            :key="index"
            class="fp-instance"
          >
            <f-p-input
              class="fp-instance-item"
              v-if="item.type === 'INPUT'"
              :description="item as FPInputDescription"
            />
            <f-p-select
              class="fp-instance-item"
              v-else-if="item.type === 'SELECT'"
              :description="item as FPSelectDescription"
            />
          </div>
        </el-form>
      </el-collapse-item>
    </el-collapse>

    <template #footer>
      <div style="flex: auto">
        <el-tooltip content="取消将不保存更改内容" :hide-after="0">
          <el-button @click="close">取消</el-button>
        </el-tooltip>
        <el-button type="primary" @click="saveConfig">保存</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<style scoped lang="scss">
::v-deep(.option-item) {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .class-name {
    font-size: 12px;
    color: var(--el-text-color-placeholder);
  }
}

.node-configuration {
  ::v-deep(.el-drawer__header) {
    margin: 0;
  }

  .function-type-select {
    width: 100%;
  }
}
</style>
<style lang="scss">
.node-configuration {
  .el-drawer__header {
    margin: 0;
    padding: 0;
  }

  .el-drawer__body {
    padding: 0;
  }

  .el-collapse-item__header {
    font-size: 13px;
    --el-collapse-header-height: 30px;
    padding: 0 20px;
    background-color: var(--el-color-info-light-9);
    border-top: 1px solid var(--el-color-info-light-7);
  }

  .el-collapse-item__wrap {
    padding: 5px 20px;
    border-bottom: none;

    .el-collapse-item__content {
      padding: 0;
    }
  }
}

.function-type-select-group {
  .group-title {
    line-height: 30px;
    display: flex;
    align-items: center;
    justify-content: flex-start;

    .icon {
      width: 20px;
      color: var(--el-text-color-placeholder);

      span {
        display: flex;
        align-content: center;
        justify-content: center;
      }
    }

    .name {
      font-size: 12px;
      color: var(--el-text-color-placeholder);
      font-weight: bolder;
    }

    .tag {
      font-size: 12px;
      color: var(--el-text-color-placeholder);
    }
  }
}
</style>
